<template>
    <div>
        <el-row style="display: flex;align-items: center;padding: 10px">
            <el-col :span="ui.spanLabel" class="label">
                <label :title="properties.description">{{keys}}:</label>
            </el-col>
            <el-col :span="ui.spanControl">
                <el-radio-group v-model="eValue" :disabled="properties.disabled||false" @change="changeVal">
                    <template v-for="(item,index) in properties.options">
                        <el-radio :label="item.value">{{item.label}}</el-radio>
                    </template>
                </el-radio-group>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "e-radio",
        props:{
            properties:{
                type:Object
            },
            ui:{
                type:Object
            },
            keys:{
                type:String
            }
        },
        data () {
            return {
                eValue: ''
            };
        },
        mounted(){
            let that = this;
            this.eValue = 0;
            this.$bus.$on('activeNode',function (e) {   //监听选中节点改变时当前表单初始值改变
                that.eValue = typeof(e[that.keys])!="undefined"?e[that.keys]:0;
            })
        },
        methods:{
            changeVal(val){  //当前表单输入值改变通知父组件更新画布节点数据
                this.$emit('changeAttr',{[this.keys]:val});
            }
        }
    }
</script>

<style scoped>
    .label{
        text-align: right;
        padding-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .el-radio{
        margin-right: 10px;
    }
</style>